<template>
    <div class="page">
        <div class="groupBuys w-1200">
            <div class="content">
                <div>
                    <img  class="limitlogo" src="@/assets/newImg/home/limitLogo.png" />
                </div>
                <div class="dao-ji-shi">
                    <div>
                        <div class="">10:00</div>
                    </div>
                </div>
                <div class="group-list">
                    <div v-for="(item, index) in groupBuyList" :key="index" class="group-item">
                        <img class="brug-img" :src="item.img" />
                        <div class="groupbuy-box">
                            <img class="icon" src="@/static/easydrug/homePage/groupbuy_icon.png" />
                            <span class="count">{{ item.groupBuyingCount }}人已拼团</span>
                        </div>
                        <div class="info">
                            <div class="name">{{ item.name }}</div>
                            <div class="tablet-box">
                                <div class="tablet">{{ item.tablet }}</div>
                                <div class="soldCount">已售{{ item.soldCount }}件</div>
                            </div>
                            <div class="price-box">
                                <div class="price"><span class="price-unit">￥</span>{{ item.price }}</div>
                                <div class="retailPrice">建议零售价:￥{{ item.retailPrice }}</div>
                            </div>
                            <div class="companyName">{{ item.companyName }}</div>
                            <div class="effectiveDate">效期优于:{{ item.effectiveDate }}</div>
                            <div class="btns">
                                <el-input-number class="input-number" v-model="item.num"
                                    @change="handleChange"></el-input-number>
                                <el-button class="btn">立即参团</el-button>
                            </div>
                        </div>
                    </div>
                </div>
                <pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="page.page" :page-size="page.size" :total="page.total"></pagination>
            </div>
        </div>
    </div>
</template>
<script>
import pagination from "./common/components/pagination.vue";


export default {
    components: {
        pagination
    },
    props: [],
    data() {
        return {
            groupBuyList: [],
            page: {
                size: 10,
                page: 1,
                total: 100,
                pageCount: 10
            },
        };
    },
    computed: {

    },
    watch: {},

    created() {
        this.initData()
    },
    methods: {
        initData() {
            this.groupBuyList = [
                this.getDemoName('布洛芬缓释胶囊'),
                this.getDemoName('感力清磷酸奥司他韦胶囊'),
                this.getDemoName('仁和可立复方氨酚烷胺胶囊'),
                this.getDemoName('布洛芬缓释胶囊'),
                this.getDemoName('感力清磷酸奥司他韦胶囊'),
            ]
            console.log("this.groupBuyList=", this.groupBuyList)
        },

        getDemoName(name) {
            return {
                img: require("@/static/easydrug/homePage/common.png"),
                name,
                tablet: '0.8G*64片(盒)',
                soldCount: 800,
                price: 39.50,
                retailPrice: 49.80,
                companyName: '江中药业股份有限公司',
                effectiveDate: '2026-02-28',
                num: 10,
                hotRecommentingCount: 543
            }
        },
        handleChange(value) {
            console.log(value);
        },
        handleSizeChange(curSize) {
            this.page.size = curSize
            console.log("curSize==", curSize)
        },
        handleCurrentChange(currentPage) {
            this.page.page = currentPage
            console.log("currentPage==", currentPage)
        },
    },
};
</script>
<style scoped lang="less">
.limitlogo{
    width: 1200px;
height: 200px;
background: #F1F1F1;
border-radius: 8px 8px 8px 8px;
}
.page {
    background: #FFF1F0;
    padding-top: 50px;
    padding-bottom: 56px;
}

.groupBuys {
    height: auto;
    display: flex;
    max-width: @width;
    flex-direction: column;
    margin: auto;

    .content {
        width: 100%;
        //margin-top:20px;
        // background: linear-gradient(180deg, #FFF1F0 0%, #FFFFFF 100%);
        border-radius: 8px 8px 0px 0px;
        //border: 1px solid #FFC6C6;
        //padding: 21px 20px 24px 20px;

        .head-box {
            display: flex;
            justify-content: space-between;

            .title {
                font-family: PingFang SC, PingFang SC;
                font-weight: 600;
                font-size: 22px;
                color: #333333;
            }

            .more-tips {
                font-family: MicrosoftYaHei, MicrosoftYaHei;
                font-weight: normal;
                font-size: 14px;
                color: #333333;
                vertical-align: middle;
            }

            .right-arrow {
                width: 16px;
                height: 16px;
                margin-left: 3px;
                vertical-align: middle;
            }
        }

        .group-list {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            margin-right: -22.5px; 

            .group-item {
                margin-top: 20px;
                margin-right: 22.5px;
                display: flex;
                width: 222px;
                flex-direction: column;
                background: #fff;
                position: relative;

                .brug-img {
                    width: 222px;
                    height: 222px;
                }

                .groupbuy-box {
                    position: absolute;
                    top: 10px;
                    left: 10px;
                    background: #EF1F1F;
                    border-radius: 25px;
                    padding: 3px 10px;


                    .icon {
                        width: 12px;
                        height: 12px;
                        vertical-align: middle;
                    }

                    .count {
                        font-family: PingFang SC, PingFang SC;
                        font-weight: 400;
                        font-size: 12px;
                        color: #FFFFFF;
                        text-align: left;
                        margin-left: 3px;
                        vertical-align: middle;
                    }
                }

                .info {
                    padding: 12px 12px 0px 12px;

                    .name {
                        font-family: PingFang SC, PingFang SC;
                        font-weight: 600;
                        font-size: 16px;
                        color: #333333;
                    }

                    .tablet-box {
                        width: 100%;
                        display: flex;
                        justify-content: space-between;
                        margin-top: 8px;
                        align-items: center;

                        .tablet {
                            font-family: PingFang SC, PingFang SC;
                            font-weight: 400;
                            font-size: 12px;
                            color: #EF1F1F;
                            border-radius: 3px 3px 3px 3px;
                            padding: 2px 8px;
                        }

                        .soldCount {
                            font-family: Arial, Arial;
                            font-weight: 400;
                            font-size: 13px;
                            color: #ABABAB;
                            line-height: 22px;
                            text-align: left;
                        }
                    }

                    .price-box {
                        margin-top: 8px;
                        width: 100%;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;

                        .price-unit {
                            font-family: PingFang SC, PingFang SC;
                            font-weight: 500;
                            font-size: 14px;
                            color: #EF1F1F;
                        }

                        .price {
                            font-family: DIN Alternate, DIN Alternate;
                            font-weight: bold;
                            font-size: 22px;
                            color: #EF1F1F;
                        }

                        .retailPrice {
                            font-family: Arial, Arial;
                            font-weight: 400;
                            font-size: 12px;
                            color: #666666;
                        }
                    }

                    .companyName {
                        margin-top: 8px;
                        font-family: Arial, Arial;
                        font-weight: 400;
                        font-size: 14px;
                        color: #999999;
                    }

                    .effectiveDate {
                        margin-top: 8px;
                        font-family: Arial, Arial;
                        font-weight: 400;
                        font-size: 14px;
                        color: #999999;
                    }

                    .btns {
                        margin-top: 10px;
                        width: 100%;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;

                        .input-number {
                            width: 110px !important;
                            height: 30px !important;
                            line-height: 28px !important;

                            /deep/ .el-input__inner {
                                height: 30px !important;
                                line-height: 30px !important;
                                padding-left: 10px !important;
                                padding-right: 10px !important;
                            }

                            /deep/ .el-input-number__decrease {
                                width: 30px !important;
                            }

                            /deep/ .el-input-number__increase {
                                width: 30px !important;
                            }
                        }

                        .btn {
                            height: 30px !important;
                            padding: 3px 10px !important;
                            background: #EF1F1F;
                            border-radius: 4px 4px 4px 4px;
                            font-family: PingFang SC, PingFang SC;
                            font-weight: 400;
                            font-size: 14px;
                            color: #FFFFFF;
                        }
                    }
                }


                &:nth-child(5n) {
                    margin-right: 0px !important;
                }
            }
        }
    }
}
</style>